<template>
    <div>
      <h1>I am the root component of the app</h1>
      <p>{{ msg }}</p>
      <p v-bind:class="dynamicClass">{{ innerHtml }}</p>
      <p :class="dynamicClass" v-html="innerHtml"></p>
      <p :v-html="innerHtml"></p>
      <p v-bind="composite" v-html="innerHtml"></p>
    </div>
  </template>
  
  <script>
  export default{
      data(){
          return{
              msg: "神奇的语法",
              innerHtml: "<a src='http://www.baidu.com'>baidu</a>",
              dynamicClass: "appClass",
              composite: {
                  id: "testId",
                  class: "appClass"
              }
          }
      }
  }
  </script>
  
  <style scoped>
  .appClass{
      color:red;
      font-size: 20px;
  }
  </style>